<form [formGroup]="stateForm">
  <mat-form-field>
    <mat-label>States Group</mat-label>
    <input type="text"
           matInput
           formControlName="stateGroup"
           required
           [matAutocomplete]="autoGroup">
<!-- #docregion mat-autocomplete -->
      <mat-autocomplete #autoGroup="matAutocomplete">
        @for (group of stateGroupOptions | async; track group) {
          <mat-optgroup [label]="group.letter">
            @for (name of group.names; track name) {
              <mat-option [value]="name">{{name}}</mat-option>
            }
          </mat-optgroup>
        }
    </mat-autocomplete>
<!-- #enddocregion mat-autocomplete -->
  </mat-form-field>
</form>
